<template>
<div>
    <van-dropdown-menu>
        <van-dropdown-item title="综合" disabled />
        <van-dropdown-item @change="priceChange" title="价格" v-model="priceVal" :options="option2" />
        <van-dropdown-item @change="categoryChange" title="分类" v-model="categoryVal" :options="filterCategory" />
    </van-dropdown-menu>
    <Products v-if="productsList.length" :productsList="productsList"></Products>
    <van-empty v-else image="search" description="描述文字" />
</div>
</template>

<script>
import Products from '../components/Products.vue'
export default {
    components: {
        Products
    },
    props: ["productsList", "filterCategory"],
    data() {
        return {
            priceVal:'desc',
            categoryVal: 0,
            option2: [{
                    text: '价格由高到低',
                    value: 'desc'
                },
                {
                    text: '价格由低到高',
                    value: 'asc'
                }
            ],
        }
    },
    beforeUpdate() {
        this.filterCategory.map(item => {
            if (item.checked) {
                this.categoryVal = item.value
                return
            }
        })
    },
    methods:{
        categoryChange(value){
            this.$emit('categoryChange',value)
        },
        priceChange(value){
            this.$emit('priceChange',value)
        }
    }
}
</script>

<style lang="less" scoped>

</style>
